<template>
  <div :class="['test-item', answer || check || type === '3' ? 'show-answer' : '']" :key="testIndex">
    <div class="test-top flex-wrap flex-middle" :id="'child' + testIndex">
      <span class="test-title-icon" v-if="getType(testItem.fromQuestionsType)">{{typeList[testItem.questionsTypeId] || getType(testItem.fromQuestionsType)}}</span>
      <span class="flex-item"></span>
      <span v-if="!isError" :class="['test-icon', 'fs-14', testItem.isNote === '1' ? 'fc-primary' : 'fc-999']" @click="handleTop('changeNote', testItem.isNote)">
                <i :class="['icon', 'iconfont', testItem.isNote === '1' ? 'icon-edit-outlined' : 'icon-wodefabu']"></i>笔记
            </span>
      <span v-if="!isError" :class="['test-icon', 'fs-14', testItem.isCollect === '1' ? 'fc-primary' : 'fc-999']" @click="handleTop('changeCollect', testItem.isCollect)">
                <i :class="['icon', 'iconfont', testItem.isCollect === '1' ? 'icon-shoucang' : 'icon-shoucang1']"></i>收藏
            </span>
    </div>
    <div class="test-title">
      <span>{{index + '. '}}</span>
      <span class="test-icon font-14">{{icon[testItem.fromQuestionsType]}}</span>
      <span class="test-title-content rich-text" v-html="testItem.content"></span>
      <span v-if="testItem.score && showScore">（{{testItem.score}}分）</span>
      <span class="fill-notice" v-if="testItem.fillVali">这道题未回答</span>
    </div>
    <examFile
        :videoShow="videoShow"
        ref="examFile"
        :type="testItem.fileType"
        :id="testIndex"
        :url="testItem.fileHttpUrl"
        :fileStorage="testItem.fileStorage"
        v-if="testItem.fileHttpUrl || testItem.fileUrl"></examFile>
    <van-radio-group
        v-model="value"
        :disabled="edit || (reply && !!answer) || type === '3'"
        v-if="testItem.fromQuestionsType === 'T' || testItem.fromQuestionsType === 'R'">
      <div class="van-group-wrap"
           v-for="(item,index) in testItem.optionsDtoList"
           :key="index">
        <van-radio
            :class="[(edit || !!(reply && answer)) && item.isRightAnswer == 1 ? 'right' : '', (edit || !!(reply && answer)) && value && value === item.paperQuestionsOptionsId && item.isRightAnswer != 1  ? 'error' : '', ]"
            :name="item.paperQuestionsOptionsId">{{indexList[index] + '. ' + item.content}}</van-radio>
        <examFile
            :videoShow="videoShow"
            ref="examOptionsFile"
            :type="item.fileType"
            :id="testIndex + '-options' + index"
            :url="item.fileHttpUrl"
            :fileStorage="item.fileStorage"
            v-if="item.fileHttpUrl || item.fileUrl"></examFile>
      </div>
    </van-radio-group>
    <van-checkbox-group
        v-model="value"
        :disabled="edit || (reply && !!answer) || type === '3'"
        v-else-if="testItem.fromQuestionsType === 'M'">
      <div class="van-group-wrap"
           v-for="(item,index) in testItem.optionsDtoList"
           :key="index">
        <van-checkbox
            icon-size="20px"
            shape="square"
            :class="[(edit || !!(reply && answer)) && item.isRightAnswer == 1 ? 'right' : '', (edit || !!(reply && answer)) && value && value.find(e => e === item.paperQuestionsOptionsId) && item.isRightAnswer != 1  ? 'error' : '', ]"
            :name="item.paperQuestionsOptionsId">{{indexList[index] + '. ' + item.content}}</van-checkbox>
        <examFile
            :videoShow="videoShow"
            ref="examOptionsFile"
            :type="item.fileType"
            :id="testIndex + '-options' + index"
            :url="item.fileHttpUrl"
            :fileStorage="item.fileStorage"
            v-if="item.fileHttpUrl || item.fileUrl"></examFile>
      </div>
    </van-checkbox-group>
    <div v-else-if="testItem.fromQuestionsType === 'F' && testItem.fillCount">
      <van-field
          class="van-input"
          v-model="value[i]"
          label="填空"
          placeholder="请输入内容"
          rows="1"
          autosize
          type="textarea"
          :disabled="edit || (reply && !!answer) || type === '3'"
          v-for="(it,i) in testItem.fillCount"
          :key="i"/>
    </div>
    <div v-else-if="testItem.fromQuestionsType === 'F'">
      <van-field
          class="van-input"
          v-model="value[0]"
          :disabled="edit || (reply && !!answer) || type === '3'"
          label="填空"
          rows="1"
          autosize
          type="textarea"
          placeholder="请输入内容" />
    </div>
    <div v-else-if="testItem.fromQuestionsType === 'A'">
      <van-field
          class="van-textarea"
          v-model="value"
          :disabled="edit || (reply && !!answer) || type === '3'"
          rows="4"
          autosize
          maxlength="800"
          type="textarea"
          placeholder="请输入内容" />
    </div>
    <template v-if="reply && !answer && type !== '3' && testItem.fromQuestionsType !== 'T' && testItem.fromQuestionsType !== 'R'">
      <div class="test-btn fs-16 flex-wrap">
        <button
            class="btn"
            type="primary"
            @click="sureInput">确认</button>
      </div>
    </template>
    <template v-if="answer || type === '3'">
      <div class="test-answer green fs-16 flex-wrap" v-if="testItem.fromQuestionsType !== 'F'">
        <span class="fc-333 fw-b">{{text[testItem.questionsType] || '正确答案'}}：</span>
        <span v-html="isRightAnswer" class="flex-item"></span>
        <span class="red ml20" v-if="currentStatus">我的答案：{{currentAnswer}}</span>
      </div>
      <examFile
          :videoShow="videoShow"
          ref="examAnswerFile"
          :type="testItem.answerFileType"
          :id="testIndex + '-answer'"
          :url="testItem.answerFileHttpUrl"
          :fileStorage="testItem.answerFileStorage"
          v-if="testItem.answerFileHttpUrl || testItem.answerFileUrl"></examFile>
      <div class="test-answer fs-16 flex-wrap fc-7f">
        <span>解析：</span>
        <span v-html="testItem.remark || '暂无'" class="flex-item"></span>
      </div>
      <examFile
          :videoShow="videoShow"
          ref="examRemarkFile"
          :type="testItem.remarkFileType"
          :id="testIndex + '-remark'"
          :url="testItem.remarkFileHttpUrl"
          :fileStorage="testItem.remarkFileStorage"
          v-if="testItem.remarkFileHttpUrl || testItem.remarkFileUrl"></examFile>
    </template>
  </div>
</template>
<script>
import { getType } from '@/assets/js/type.js'
import examFile from '../exam/examFile.vue'
import VanRadioGroup from "@/components/vant/van-radio-group/van-radio-group.vue";
import VanRadio from "@/components/vant/van-radio/van-radio.vue";
import VanField from "@/components/vant/van-field/van-field.vue";
import VanCheckboxGroup from "@/components/vant/van-checkbox-group/van-checkbox-group.vue";
import VanCheckbox from "@/components/vant/van-checkbox/van-checkbox.vue";
export default {
  data() {
    return {
      indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'],
      text: {
        'R': '正确答案',
        'T': '正确答案',
        'M': '正确答案',
        'F': '参考答案',
        'A': '参考答案',
      },
      icon: {
        'R': '单选题',
        'T': '判断题',
        'M': '多选题',
        // 'M': '不定项选题',
        'F': '填空题',
        'A': '问答题',
      },
      value: this.val || '',
      scoreVal: this.score || undefined,
      explain: this.checkExplain || '',
    }
  },
  props:{
    testItem: {
      type: Object,
      default: () => {
        return {
          type: 0
        }
      }
    },
    testIndex: {
      type: Number,
      default: 0
    },
    edit: {
      type: Boolean,
      default: false
    },
    answer: { // 是否显示答案 Boolean 显示答案与否 Number 0未做 1正确 2错误 3待评 String '1'只显示答案   '2'只显示分数
      type: [Boolean, Number, String],
      default: false
    },
    check: { // 是否阅卷
      type: String,
      default: ''
    },
    reply: { // 是否显示回答确认按键
      type: Boolean,
      default: false
    },
    showScore: { // 是否显示试题分数
      type: Boolean,
      default: true
    },
    idkey: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: '1'
    },
    val: [String, Number, Array, Boolean, Object],
    score: [Number, String],
    checkExplain: {
      type: String,
      default: ''
    },
    total: { // 总数
      type: Number,
      default: 0
    },
    btnShow: {
      type: Boolean,
      default: true
    },
    typeList: {
      type: Array,
      default: () => []
    },
    isError: {
      type: Boolean,
      default: false
    },
    videoShow: {
      type: Boolean,
      default: true
    }
  },
  components: {
    VanCheckbox,
    VanCheckboxGroup,
    VanField,
    VanRadio,
    VanRadioGroup,
    examFile
  },
  mounted() {
    console.log(`=>(exam.vue:213) type`, this.type);
    console.log(`=>(exam.vue:200) reply`, this.reply);
    console.log(`=>(exam.vue:192) answer`, this.answer);
    console.log(`=>(exam.vue:188) edit`, this.edit);
  },
  computed: {
    index() {
      return this.double(this.testIndex + 1)
    },
    isRightAnswer() {
      if (this.type === '3') {
        this.value = this.isRight
      }
      if (this.testItem.fromQuestionsType === 'T' ||
          this.testItem.fromQuestionsType === 'R' ||
          this.testItem.fromQuestionsType === 'M') {
        return this.rightAnswer(this.testItem.optionsDtoList, 'isRightAnswer', '1')
      } else {
        return this.testItem.answerContent || ''
      }
    },

    isRight() {
      let arr = [], str
      if ((this.testItem.fromQuestionsType === 'T' ||
          this.testItem.fromQuestionsType === 'R')) {
        this.testItem.optionsDtoList.map((e, i) => {
          if (e.isRightAnswer === '1') {
            str = e.paperQuestionsOptionsId
          }
        })
        return str
      } else if (this.testItem.fromQuestionsType === 'M') {
        this.testItem.optionsDtoList.map((e, i) => {
          if (e.isRightAnswer === '1') {
            arr.push(e.paperQuestionsOptionsId)
          }
        })
        return arr
      } else if (this.testItem.fromQuestionsType === 'F') {
        let answerContent = this.testItem.answerContent ? this.testItem.answerContent.replace(/,$/, '').slice(2,-2) : ''
        arr = answerContent.split(']],[[')
        return arr
      } else {
        return this.testItem.answerContent ? this.testItem.answerContent.replace(/<\/?.+?\/?>/g, '') : ''
      }
    },
    currentStatus() {
      return (this.testItem.fromQuestionsType === 'T' ||
          this.testItem.fromQuestionsType === 'R' ||
          this.testItem.fromQuestionsType === 'M') && this.answer !== 1 && this.answer !== 0 && this.type !== '3'
    },
    currentAnswer() {
      let arr = [], str
      if ((this.testItem.fromQuestionsType === 'T' ||
              this.testItem.fromQuestionsType === 'R') &&
          this.value) {
        this.testItem.optionsDtoList.map((e, i) => {
          if (e.paperQuestionsOptionsId === this.value) {
            str = this.indexList[i]
          }
        })
        return str
      } else if (this.testItem.fromQuestionsType === 'M' && this.value.length) {
        this.testItem.optionsDtoList.map((e, i) => {
          this.value.map(item => {
            if (e.paperQuestionsOptionsId === item) {
              arr.push(this.indexList[i])
            }
          })
        })
        return arr.join(',')
      }
      return ''
    }
  },
  methods: {
    getType(type) {
      return getType(type)
    },
    double(i) {
      return i > 9 ? i : ('0' + i)
    },
    rightAnswer(list, key, val) {
      let arr = []
      list.map((e, i) => {
        if (e[key] == val) {
          arr.push(this.indexList[i])
        }
      })
      return arr.join(',')
    },
    handleChange(value) {
      this.$emit('changeScore', this.idkey, value)
    },
    handleCheckExplain(value) {
      this.$emit('changeCheckExplain', this.idkey, value)
    },
    sureInput() {
      this.$emit('sureInput', this.idkey, this.value, true)
    },
    handleTop(key, type) {
      this.$emit(key, type)
    },
  },
  watch: {
    val (n) {
      if (n === '[]'){
        this.value = []
      } else {
        this.value = n
      }
    },
    score (n) {
      this.scoreVal = n
    },
    value (n) {
      this.$emit('input', this.idkey, n)
    }
  }
}
</script>
<style lang="scss" scoped>
.test-item{
  padding-bottom: 50px;
  &.show-answer{
    padding-bottom: 15px;
  }
  &.show-answer:last-child{
    padding-bottom: 25px;
  }
}
.test-top{
  padding: 20px 0 0;
  .test-icon{
    padding: 0 0 0 15px;
    .icon{
      margin-right: 3px;
      vertical-align: -1px;
    }
    & + .test-icon{
      position: relative;
      &:before{
        position: absolute;
        left: 7px;
        top: 1px;
        content: '|';
        color: #EEEEEE;
      }
    }
  }
}
.test-title-icon{
  display: inline-block;
  text-align: center;
  //width: 38px;
  padding: 0 2px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
  color: #fff;
  background: linear-gradient(163deg, #40D2CC 0%, #1EA69D 100%);
  border-radius: 2px;
  vertical-align: text-bottom;
  margin-right: 5px;
}
.test-title{
  color: #000;
  font-size: 16px;
  padding: 15px 0;
  line-height: 28px;
  font-weight: bold;
  margin: 0 0 10px;
  .fill-notice{
    display: inline-block;
    width: 94px;
    height: 28px;
    color: #fff;
    font-size: 12px;
    background: #D0021B;
    border-radius: 2px;
    text-align: center;
    margin-left: 12px;
    vertical-align: bottom;
  }
  .test-title-content{
    :deep(p){
      display: inline;
    }
    :deep(br){
      display: none;
    }
  }
}
.red{
  color: #DF0000;
}
.test-answer{
  padding: 10px 0;
  color: #333;
  margin-top: 15px;
  & + .test-answer{
    margin-top: 0;
    padding-top: 0;
  }
}
.test-answer.green{
  color: #1EA69D;
}
.test-answer.red{
  color: #D0021B;
}
.test-btn{
  padding: 25px 0 0;
  .btn{
    width: 120px;
    height: 40px;
    border-radius: 20px;
  }
}
.van-radio-group{
  .van-radio{
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    padding: 15px 15px;
    width: 100%;
    &[aria-checked=true],&.right{
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }
    &.error{
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }
    &+ .van-radio{
      margin-top: 15px;
    }
    &+ .exam-file-wrap{
      margin-top: 10px;
    }
    :deep(.van-radio__icon){
      width: 20px;
      height: 20px;
      .van-icon{
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }
    :deep(.van-radio__label){
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}
.van-checkbox-group{
  .van-checkbox{
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
    padding: 15px 15px;
    &[aria-checked=true]{
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }
    &.right{
      background: rgba(0, 169, 158, 0.06);
      border: 1px solid #1EA69D;
    }
    &.error{
      background: rgba(223, 0, 0, 0.05);
      border: 1px solid rgba(223, 0, 0, 0.4);
    }
    &+ .van-checkbox{
      margin-top: 15px;
    }
    &+ .exam-file-wrap{
      margin-top: 10px;
    }
    :deep(.van-checkbox__icon){
      width: 20px;
      height: 20px;
      .van-icon{
        line-height: 20px;
        width: 20px;
        height: 20px;
      }
    }
    :deep(.van-checkbox__label){
      font-size: 16px;
      color: #333;
      margin-left: 10px;
    }
  }
}
.van-group-wrap{
  &+ .van-group-wrap{
    margin-top: 15px;
  }
}
.van-input{
  padding: 0;
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
  :deep(.van-field__label) {
    padding: 10px;
    width: 80px;
    text-align: center;
    font-size: 16px;
    color: #333333;
    background: #fff;
    border-right: 1px solid #EEEEEE;
  }
  :deep(.van-field__value){
    padding: 10px 10px 10px 0;
  }
}
.van-textarea{
  background: #FAFAFA;
  border: 1px solid #EEEEEE;
  border-radius: 4px;
}
.group-wrap{
  border-bottom: 1px solid #EEEEEE;
  padding-bottom: 25px;
  .el-input-number{
    margin: 0 6px;
  }
}
.fc-7f{
  color: #7F7F7F;
}
</style>
